
<template>
	<view>
		<view class="cpicker-content">
			<view class="flex align-center shadow-warp">
				<scroll-view id="nav-bar" class="nav-bar flex-sub"scroll-x="true" scroll-with-animation="true" :scroll-left="scrollLeft" >
					<view
						v-for="(item,index) in tabbars" 
						class="nav-item"
						:key="index"
						:id="'tab'+index"
						@click="changeTab(index)"
						 :class="{'current': index === tabCurrentIndex}"
					><text class="nav-bar-title">{{item.label}}</text></view>
				</scroll-view>
				<view class="text-blue text-sd padding-left" @tap="reset">重置</view>
				<view class="text-blue text-sd padding-lr" @tap="hide">确认</view>
			</view>
			<view class="city_content"> 
				<scroll-view class="panel-scroll-box" :scroll-y="enableScroll" :cscrollTop="scrollTop" :current="tabCurrentIndex" :scroll-top="scrollTop" @touchmove.stop="emptyMethod">
					<block v-for="(item,index) in showData" :key="index">
						<view class="flex-row-c-c" @click="changCity(tabCurrentIndex,item)">
							<text class="city-text">{{item.label}}</text>
							<view class="iconfont icon-gouxuan text-blue" v-if="tabbars[tabCurrentIndex].id==item.id" :id="'show'+tabCurrentIndex"></view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	let windowWidth = 0,scrollTimer = false, tabBar;
	export default {
		name: 'UniCityNvue',
		props: {
			data: {      // 默认的省市区id，如果不使用id的情况下则为[]；
				type:Array,
				default:function(){
					return  [];
				},
			},
			provincedata: {      // 默认的省市区id，如果不使用id的情况下则为[]；
				type:Array,
				default:function(){
					return  [];
				},
			}
		},
		data() {
			return {
				isFirst: true,
				rightIcon:true,
				scrollLeft: 500, //顶部选项卡左滑距离
				scrollTop:0,
				enableScroll: true,
				tabCurrentIndex: 0, //当前选项卡索引
				tabbars:this.$u.deepClone(this.provincedata),
				showData:this.data
			}
		},
		watch: {
			provincedata(val){
				this.tabbars=val;
			}
		},
		methods: {
			emptyMethod(){
				
			},
			show(){
				if(this.isFirst){
					this.isFirst = false;
				}
				windowWidth = uni.getSystemInfoSync().windowWidth;
				if(this.provincedata.length>0&&this.isFirst&&this.provincedata[this.provincedata.length-1].id!=""){
					this.showData=this.findSameId(this.data,this.tabbars[this.provincedata.length],this.tabbars[this.provincedata.length-1]);
					var current={
							label:"请选择",
							id:"",
						}
					this.tabbars.push(current);
					this.tabCurrentIndex=this.provincedata.length-1;
					this.scrollTop=0;
					this.setScroll(this.tabCurrentIndex);
				}else{
					this.$nextTick(()=>{
						this.provincedata.forEach((item,index)=>{
							if(item.id == ''){
								if(index != 0){
									this.tabCurrentIndex = index-1
								}else{
									this.tabCurrentIndex = index
								}
							}
						})
						this.changeTab(this.tabCurrentIndex)
					})
				}
			},
			findSameId(tree, currentTab,preTab) {
				let retNode = null;
				function deepSearch(tree, currentTab,preTab) {
					for (var i = 0; i < tree.length; i++) {
						if (tree[i].children && tree[i].children.length > 0) {
							deepSearch(tree[i].children, currentTab,preTab);
						}
						var flag=currentTab==undefined?true:(currentTab.id===""?true:false);
						var value=tree[i].id+"";
						var text=tree[i].label;
						if (preTab!=null&&flag&&preTab.label=== text&&preTab.id+"" ===value) {
							retNode=tree[i].children;
							break;
						}else if (currentTab!=null&&currentTab.label=== text&&currentTab.id+"" === value) {
							retNode=tree;
							break;
						}
					}
				}
				deepSearch(tree, currentTab,preTab);
				return retNode==null?tree:retNode;
			},
			
			hide(){
				if(this.isFirst){
					this.isFirst = false;
				}
				if(this.tabbars.length-1 != this.tabCurrentIndex){
					this.tabbars = this.tabbars.slice(0, this.tabCurrentIndex+1)
					this.tabbars.push({
						label:"请选择",
						id:"",
					})
					this.$forceUpdate()
				}
				this.$emit('funcvalue',{
					data:this.tabbars,
					index:this.tabCurrentIndex
				});
			},
			reset(){
				this.isFirst = true;
				this.tabbars = [{ label:'请选择', id:'' }];
				this.changeTab(0)
				this.hide()
			},
			//tab切换
			changeTab(e){
				let index = e;
				this.setScroll(index);
				//延迟300ms,等待swiper动画结束再修改tabbar
				this.tabCurrentIndex = index; 
				this.showData=this.findSameId(this.data,this.tabbars[index],index===0?this.tabbars[index]:this.tabbars[index-1]);
				setTimeout(()=>{
					this.getScroll("show"+index);
				}, 10)
			},
			//获得元素的size
			getElSize(id) { 
				return new Promise((res, rej) => {
					let el = uni.createSelectorQuery().in(this).select('#' + id);
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data) => {
						res(data);
					}).exec();
				});
			},
			 changCity(index,item) {
				this.tabbars[index].label=item.label;
				this.tabbars[index].id=item.id;
				if(index<(this.tabbars.length-1)){
					this.tabbars.splice(index+1,this.tabbars.length-index-1)
				}
				if(!this.$tools.emptyValid(item.children)){
					var current={
							label:"请选择",
							id:""
						}
					this.showData=item.children;
					this.tabbars.push(current);
					this.tabCurrentIndex++; 
					this.scrollTop=0;
					this.setScroll(index);
				}else{
					this.hide();
				}
			},
			async setScroll(index){
				let width = 0;
				let nowWidth = 0;
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if(i === index){
						nowWidth = result.width;
					}
				}
				if ((width+nowWidth)>windowWidth) {
					this.scrollLeft=width+nowWidth;
				}else{
					this.scrollLeft = 0;
				} 
			},
			getScroll(id) {
				uni.createSelectorQuery().in(this).select('.panel-scroll-box').boundingClientRect((data)=>{
					uni.createSelectorQuery().in(this).select('#' + id).boundingClientRect((res)=>{
						if(res != undefined && res != null && res != ''){
							this.scrollTop=res.top-data.top;
						}
					}).exec()
				}).exec();
			}
		}
	}
</script>

<style lang="scss">
/* 优惠券面板 */
.mask {
    visibility: hidden;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 6;
    background: rgba(0, 0, 0, .3);
    opacity: 0;
    transition: all .3s ease;
}
.maskShow {
    visibility: visible;
    opacity: 1;
}
.cpicker-content {
    background-color: #FFFFFF;
    z-index: 7;
}
.city-head {
    width: 750rpx;
    height: 88rpx;
    flex-direction: column;
    border-bottom-width: 1px;
    border-bottom-color: #F4F4F4;
    border-bottom-style: solid;
}
.city-head-title {
    font-size: 15px;
    line-height: 88rpx;
    align-items: center;
    /* #ifndef APP-NVUE */
    text-align: center;
    /* #endif */
}
.rightIcon {
    position: absolute;
    right: 15px;
    top: 9px;
    font-size: 30px;
    color: #BEBEBE;
}
.nav-bar {
    position: relative;
    z-index: 10;
    height: 90upx;
    white-space: nowrap;
    background-color: #fff;
	padding: 0 20rpx;
}
.nav-bar::-webkit-scrollbar {
  display: none;
}
.nav-item {
    /* #ifndef APP-NVUE */
    display: inline-flex!important;
    /* #endif */
    /* #ifdef APP-NVUE */
    flex-direction: row!important;
    /* #endif */
    // width: 170rpx;
    padding: 7px 5px;
    line-height: 26px;
    align-items: center;
    justify-content: center;
    color: #303133;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-bar-title {
    font-size: 12px;
}
.current {
    color: $hub-color-theme;
    border-color: $hub-color-theme;
    border-bottom-width: 4rpx;
    border-bottom-style: solid;
}
.current:after {
    width: 50%;
}
.panel-scroll-box {
    height: 516rpx;
    margin-top: 8px;
}
.flex-row-c-c {
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
    /* #ifdef APP-NVUE */
    flex-direction: row;
    /* #endif */
    padding:0 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.city-text {
    /* #ifdef APP-NVUE */
    flex-direction: row;
    /* #endif */
    height: 35px;
    line-height: 35px;
    font-size: 13px;
}
.hide {
    opacity: 0;
}
.ischeck {
    /* #ifndef APP-NVUE */
    display: inline-flex!important;
    /* #endif */
    /* #ifdef APP-NVUE */
    flex-direction: column;
    /* #endif */
    margin-right: 5px;
    vertical-align: middle;
}

</style>